{layout name="../../admin/view/layout/main" /}
{:breadcrumb(['系统管理:system/user/index', '部门管理'])}
<link rel="stylesheet" type="text/css" href="{$xpConfig['web_static']}/apps/remixicon/remixicon.css">
<div class="row">
  <div class="col-lg-12">
      <div class="card">
          <div class="card-body">
                <div id="toolbar" class="toolbar-btn-action">
                  <button type="button" class="btn btn-success me-1 btn-sm" onclick="add();">
                    <span class="mdi mdi-plus"></span> 新增
                  </button>
                </div>
                <table id="table"></table>
          </div>
      </div>
  </div>
</div>

<div class="modal fade" id="myModal" tabindex="-1" aria-labelledby="exampleModalLiveLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header">
        <h6 class="modal-title" id="exampleModalLiveLabel">部门信息</h6>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <form action="{:url('system/dept/save')}" method="post" class="input-form needs-validation" novalidate>
        <input type="hidden" name="id" value="" id="post-id">
        <div class="modal-body">
          <div class="mb-3 row">
            <label for="pid" class="col-sm-3 col-form-label">上级部门</label>
            <div class="col-sm-9">
              <select class="form-select" name="pid" id="pid">
                <option value="0">-- 选择 --</option>
                {$tree|raw}
              </select>
            </div>
        </div>
                <div class="mb-3 row">
                    <label for="name" class="col-sm-3 col-form-label">部门名称 <font color="red">*</font></label>
                    <div class="col-sm-9">
                        <input type="text" class="form-control" id="name" name="name" autocomplete="off" required>
                    </div>
                </div>
                <div class="mb-3 row">
                  <label for="admin_id" class="col-sm-3 col-form-label">负责人</label>
                  <div class="col-sm-9">
                    <select class="form-select" name="admin_id" id="admin_id">
                      <option value="0">-- 选择 --</option>
                      {foreach $users as $u_id => $u_name}
                      <option value="{$u_id}">{$u_name}</option>
                      {/foreach}
                    </select>
                  </div>
              </div>
              {:chooseOneImage('icon', '部门图标', '200px*200px', false, 3)}
              <div class="mb-3 row">
                <label for="image" class="col-sm-3 col-form-label">字体图标</label>
                <div class="col-sm-9">
                    <input type="text" id="image" name="image" class="form-control" autocomplete="off"/>
                    <div class="form-text" style="color: gray;">优先显示字体图标, 字体图标: <a href="https://remixicon.com/" target="_blank">https://remixicon.com/</a></div>
                </div>
            </div>
                <div class="mb-3 row">
                    <label for="sort" class="col-sm-3 col-form-label">显示顺序 <font color="red">*</font></label>
                    <div class="col-sm-9">
                        <input type="text" class="form-control" id="sort" name="sort" autocomplete="off" required>
                    </div>
                </div>
        </div>
        <div class="modal-footer">
            <button type="submit" class="btn btn-primary">确定</button>
            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
        </div>
    </form>
    </div>
  </div>
</div>

<script>
  var myModal = null;
 function add(){
    $('.input-form')[0].reset();
    $('#post-id').val('');
    deleteImageForicon();
    myModal.show();
 }
 function setStatus(id){
    xp_confirm("{:url('system/dept/status')}", {id: id}, function (){
        $('#table').bootstrapTable('refresh');
    });
 }
 function editPost(id){
    $.post("{:url('system/dept/view')}", {id: id}, function (res){
        $('#post-id').val(id);
        $('#name').val(res.name);
        $('#pid').val(res.pid);
        $('#sort').val(res.sort);
        $('#admin_id').val(res.admin_id);
        if (res.image){
          receiveDataForicon(res.image);
        }else{
          deleteImageForicon();
        }
        $('#image').val(res.icon);
        myModal.show();
    });
 }
 function removePost(id){
    xp_confirm("{:url('system/dept/remove')}", {id: id}, function (){
        $('#table').bootstrapTable('refresh');
    });
 }
  $(function (){
    myModal = new bootstrap.Modal($('#myModal'));
    validation_form('.input-form', function (){
      myModal.hide();
        $('#table').bootstrapTable('refresh');
    });
  var $table = $('#table');
    $table.bootstrapTable({
      toolbar: '#toolbar',
      classes: 'table table-bordered table-hover table-striped lyear-table',
      url: "{:url('system/dept/data')}",
      idField: 'id',
      columns: [
          {'field': 'id', title: 'ID'},
          {'field': 'name', title: '部门名称'},
          {'field': 'icon', title: '图标', formatter: function(value, item){
                if (item.icon){
                    return `<i class="ri-${item.icon}" style="font-size: 24px; color: gray;"></i>`;
                }
                if (item.image){
                    return `<img src="${item.image}" style="width: auto; height: 24px; display: block;">`;
                }
                return '-';
            }},
          {'field': 'sort', title: '显示顺序'},
          {'field': 'user', title: '负责人', formatter: function(value, item){
            return value ? value.nickname : '-';
          }},
          {'field': 'status', title: '状态', formatter: function(value, item){
            var dom = value == 1 ? `<span class="badge bg-danger">停用</span>` : `<span class="badge bg-success">正常</span>`;
            return `<span style="cursor: pointer;" onclick="setStatus('${item.id}');">${dom}</span>`;
          }},
          {'field': 'update_time', title: '更新时间'},
          {'field': 'update_by', title: '操作', formatter: function(value, item){
            var dom = `<span class="badge bg-info" onclick="editPost('${item.id}');" style="cursor: pointer;"><span class="mdi mdi-square-edit-outline"></span> 编辑</span>`;
            dom = dom + `<span class="badge bg-danger" onclick="removePost('${item.id}');" style="cursor: pointer; margin-left: 5px;"><span class="mdi mdi-delete-outline"></span> 删除</span>`;
            return dom;
          }},
      ],
      treeShowField: 'name',
      parentIdField: 'pid',
      onPostBody: function() {
        var columns = $table.bootstrapTable('getOptions').columns
        if (columns && columns[0][1].visible) {
          $table.treegrid({
            treeColumn: 1,
            onChange: function() {
              $table.bootstrapTable('resetView')
            }
          })
        }
      }
    })
  });
</script>